/*
	List of colors for fill:	Body background, Button background, button highlight, LI in main, Table odd row, Table even row, Table header
	List of colors for text: 	Text color, button color, input color, LI in main, Table row odd, table row even, table header

	Line 5: body { background-color: #d1eef9; font-size: 1.2em; }
	Line 13: main ul li { display: block; margin-top: 1px; border: 1px solid black; padding: 7px; border-radius: 3px; color: white; background-color: #9acfe2; max-width: 800px; }
	Line 16: 	background-color: #9acfe2;
	Line 42: .required { background-color: #ff8989; }
	Line 43: .blue { background-color: #9acfe2; }
	Line 44: .valid { background-color: #88fc7b; color: black; }
	Line 58: 	background-color: #9acfe2; border-radius: 3px; text-align: center; 
	Line 60: .button:hover, main ul li:hover { background-color: #acacac; }
	Line 62: input[type=submit]  { background-color: #9acfe2; color: white; }
	Line 63: input[type=submit]:hover { background-color: #acacac; }
	Line 79:   border: 1px solid #1C6EA4;
	Line 80:   background-color: #DBF5FF;
	Line 88:   border: 0px solid #AAAAAA;
	Line 92:   color: #000000;
	Line 95:   background: #BBD9F2;
	Line 98:   background: #1C6EA4;
	Line 99:   background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 99:   background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 99:   background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 100:   background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 100:   background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 100:   background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 101:   background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 101:   background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 101:   background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	Line 105:   color: #FFFFFF;
	Line 115:   background: #1C6EA4;
	Line 116:   color: #FFFFFF;
	Line 134: 	.required { background-color: #ff8989; }
	Line 135: 	.valid { background-color: #88fc7b; }
	Line 149: 	.required { background-color: #ff8989; }
	Line 150: 	.valid { background-color: #88fc7b; }
	Line 155: ::-webkit-input-placeholder { Chrome/Opera/Safari color: #333; }
	Line 156: ::-moz-placeholder {  Firefox 19+ color: #333; }
	Line 157: :-ms-input-placeholder { IE 10+ color: #333; }
	Line 158: :-moz-placeholder {  Firefox 18-color: #333; }

	*/
body { background-color: #d1eef9; font-size: 1.2em; font-family: "Open Sans", sans-serif; }
header { width: 100%; }
header img { width: 33%; }
header h1 { display: inline-block; text-align: center; width: 60%; margin-bottom: 15px;}
nav { float: left; width: 275px; max-width: 100%; }
main { margin-left: 280px; }

main ul { list-style: none; padding: 0px; }
main ul li { display: block; margin-top: 1px; border: 1px solid black; padding: 7px; border-radius: 3px; color: white; background-color: #9acfe2; max-width: 800px; }

input, select, textarea { 
	background-color: #9acfe2;
	color: black;
	margin: 3px 0px; 
	padding: 5px 0px;
	border: 1px solid black;
	border-radius: 5px;
	display: inline-block;
	width: 100%;
	font-size: 1.2em;
}
input, select { 
	text-align: center;
}
textarea {
	height: 250px;
	padding: 5px 5px;
	width: 70%;
}

.whole { width: 99.5%; }
.half { width: 49.5%; }
.quarter { width: 24.5%; }
.third { width: 32.8%;}
.tiny { width: 15%; }
.micro { width: 10%; }
.centered { text-align: center; }
.required { background-color: #ff8989; }
.blue { background-color: #9acfe2; }
.valid { background-color: #88fc7b; color: black; }
.example { float: right; }
.inline { display: inline-block; }
.right { text-align: right; }
.outline { border: 1px solid black; }
.left { text-align: left; }
.black {color: black; }
.green {color: green; }
.red {color: red; }
.hidden { display: none; }
.nodeco { text-decoration: none; }
.button { 
	width: auto; padding: 0.25em; border: 1px solid black; 
	margin: 1px; padding: 7px 0px; min-width: 70px; color: black; 
	background-color: #9acfe2; border-radius: 3px; text-align: center; 
	vertical-align: middle; overflow: hidden; height: 22px; }
.button:hover, main ul li:hover { background-color: #a4d8ec; }
.submit { color: white; clear: both; margin-top: 25px; margin-bottom: 25px; }
input[type=submit]  { background-color: #9acfe2; color: white; }
input[type=submit]:hover { background-color: #a4d8ec; }

.sign-in-box { 
	text-align: center;
	font-size: 1.2em;
	padding-bottom: 25px;
}
.sign-in-box span {
	font-weight: bold;
}

main table {
	width: 600px;
	margin: 20px auto;
}
table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #DBF5FF;
  width: 100%;
  text-align: left;
  margin: 20px 0px;
  border-collapse: collapse;
  border-radius: 3px; 
}
table.blueTable td, table.blueTable th {
  border: 0px solid #AAAAAA;
  padding: 2px 1px;
}
table.blueTable tbody td {
  color: #000000;
}
table.blueTable tr:nth-child(even) {
  background: #BBD9F2;
}
table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
}
table.blueTable thead th {
  font-weight: bold;
  color: #FFFFFF;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

#list_of_visit_history a {
	text-decoration: underline;
	cursor:pointer;
}
#list_of_visit_history a:hover {
	color: white;
}

#client_todo a {
	text-decoration: none;
    color: black;
}
#client_todo a:hover {
	text-decoration: none;
    color: black;
}
.client_action {
	border: 1px solid black;
    border-radius: 5px;
    background-color: #9acfe2;
    padding: 10px;
    margin-top: 25px;
	overflow: auto;
}

@import url(includes/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
  margin-bottom: 10px;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
  float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 




@media only screen and (max-width: 850px) {
	body { margin: 0; }
	nav { float: none; width: auto; }
	h2{ margin-bottom: 30px; }
	h3 { margin: 0px; }
	main { margin: 0px; }
	
	.whole { width: 98%; }
	.half { width: 98%; }
	.quarter { width: 49%; }
	.third { width: 49%; }
	.tiny { display: width: 25%;}
	.required { background-color: #ff8989; }
	.valid { background-color: #88fc7b; }
	.example { clear: both; width: 100px; }
	.inline { margin: 2px 0px; clear: both; }
	header { text-align: center; }
	header img { width: 50%; margin: auto; }
	header h1 { display: block; width: auto; }
	textarea { width: 93%; margin: 2%; }
}
@media only screen and (max-width: 550px) {
	h2{ margin-bottom: 30px; }
	h3 { margin: 0px; }
	.quarter { width: 98%; }
	.third { width: 98%; }
	.tiny { display: width: 98%;}
	.required { background-color: #ff8989; }
	.valid { background-color: #88fc7b; }
	header img { width: 80%; }
	.example { clear: both; width: 100px; }
}	

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #333; }
::-moz-placeholder { /* Firefox 19+ */color: #333; }
:-ms-input-placeholder { /* IE 10+ */color: #333; }
:-moz-placeholder { /* Firefox 18- */color: #333; }